$(function () {
    let bannerWrap = $('.banner-wrap');
    let imgUl = $('.banner_img_ul');
    let imgA = $('.banner_img_a');
    $.ajax({
        url: 'http://localhost:3000/banner',
        success: function (res) {
            console.log(res.banners);
            imgUl.html('');
            imgA.html('');
            res.banners.forEach(el => {
                imgUl.append(`<li><a href="#"><img src="${el.imageUrl}" class="ban_img" targetId='${el.targetId}' alt=""></a></li>`);
                imgA.append(`<a href="javascript:;" class="pull-left"></a>`);

            });
            // console.log($('.ban_img').prop('src'));
            let lis = $('.banner_img_ul>li');
            let aList = $('.banner_img_a a');
            let current = 0;
            let imgBgUrl = res.banners[current].imageUrl;
            bannerWrap.css({
                'background': `url(${imgBgUrl}) no-repeat`,
                'filter': 'blur(20px)',
                'background-size': 'cover',
                'background-position': 'center center',
            });
            lis.eq(current).show().siblings().hide();
            aList.eq(current).addClass('banner_active').siblings().removeClass('banner_active')
            var timer;

            function run() {
                timer = setInterval(function () {
                    current++
                    current = current % lis.length;
                    imgBgUrl = res.banners[current].imageUrl;
                    bannerWrap.css({
                        'background': `url(${imgBgUrl}) no-repeat `,
                        'filter': 'blur(20px)',
                        'background-size': 'cover',
                        'background-position': 'center center',
                    });
                    aList.eq(current).addClass('banner_active').siblings().removeClass('banner_active')
                    lis.eq(current).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                }, 3000)
            }

            run();

            // 上一张
            $('.last').on('click', () => {
                clearInterval(timer);
                current--;
                current = current % lis.length;
                imgBgUrl = res.banners[current].imageUrl;
                bannerWrap.css({
                    'background': `url(${imgBgUrl}) no-repeat `,
                    'filter': 'blur(20px)',
                    'background-size': 'cover',
                    'background-position': 'center center',
                });
                aList.eq(current).addClass('banner_active').siblings().removeClass('banner_active')
                lis.eq(current).show().siblings().hide();
                run();
            })

            // 下一张
            $('.next').on('click', () => {
                clearInterval(timer);
                current++;
                current = current % lis.length;
                imgBgUrl = res.banners[current].imageUrl;
                bannerWrap.css({
                    'background': `url(${imgBgUrl}) no-repeat `,
                    'filter': 'blur(20px)',
                    'background-size': 'cover',
                    'background-position': 'center center',
                });
                aList.eq(current).addClass('banner_active').siblings().removeClass('banner_active')
                lis.eq(current).show().siblings().hide()
                run();
            })

            aList.on('click', function () {
                current = $(this).index();
                clearInterval(timer);
                imgBgUrl = res.banners[current].imageUrl;
                bannerWrap.css({
                    'background': `url(${imgBgUrl}) no-repeat `,
                    'filter': 'blur(20px)',
                    'background-size': 'cover',
                    'background-position': 'center center',
                });
                lis.eq(current).show().siblings().hide();
                aList.eq(current).addClass('banner_active').siblings().removeClass('banner_active')
                run();
            })
        }
    });

})